<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div style="height: 4px;position: absolute;z-index: 2222; width: 100%; top: 46px;background: #f0f0f0"></div>
    <div style="height: 50px;"></div>
    <div class="about-us" v-show="show">
      <mt-loadmore :distanceIndex="4" @top-status-change="handleTopChange" :topDistance="30" :bottomDistance='30' :maxDistance="40" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="bottomAllLoaded" ref="loadmore" :autoFill="false" :bottomAllLoaded = bottomsta>
        <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus === 'loading'" class="color_top">Loading...</span>
        </div>
        <div class="evaluate" v-for="(item, index) in list" v-if="evasta">
          <div class="evaluateLeft">
            <img :src="item.headimg">
          </div>
          <div class="evaluateRight">
            <p class="username">{{item.nickname}}</p>
            <div class="level">
              <ul class="stars">
                <li v-for="(itemChild,index) in stars" :class=" { 'yellow' : index < item.evaluate_store } "></li>
              </ul>
            </div>
            <p class="text">{{item.evaluate_content}}</p>
            <div class="upload">
              <div class="uplodaLi" v-for="(itemImg,index) in item.evaluate_images">
                <div class="fill_img">
                  <img :src="itemImg" @click="seeImg(item.evaluate_images,index)" />
                </div>
              </div>
              <div class="clear"></div>
            </div>
            <p class="date">{{item.evaluate_time}}</p>
          </div>
        </div>
        <div class="noeva" v-if="!evasta">
          暂无评价
        </div>
        <div slot="bottom" class="mint-loadmore-bottom">
          <load-more tip="正在加载" v-show="loadingBottomShow"></load-more>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>
<script>
  import { LoadMore, Swiper } from 'vux'
  import { Loadmore } from 'mint-ui'
  import Vue from 'vue'
  Vue.component(Loadmore.name, Loadmore)
  export default {
    components: {
      LoadMore,
      Swiper
    },
    name: 'Evaluation',
    data () {
      return {
        show: false,
        content: '',
        title: '',
        list: [],
        isShow: false,
        stars: [0, 1, 2, 3, 4],
        starsNum: 0,
        evasta: true,
        loadingBottomShow: false,
        topStatus: 'loading',
        bottomsta: false,
        bottomAllLoaded: false,
        research: true,
        limit: 8,
        end_id: 0
      }
    },
    methods: {
      loadBottom () {
        this.loadingBottomShow = true
        if (this.research === true) {
          this.evalute('')
        } else {
          this.loadingBottomShow = false
          this.$refs.loadmore.onBottomLoaded()
        }
      },
      handleTopChange (status) {
        this.topStatus = status
      },
      loadTop () {
        this.evasta = true
        this.research = true
        this.end_id = 0
        this.bottomsta = false
        this.evalute('reflsh')
      },
      evalute: function (title) {
        let thisObj = this
        let ajaxUrl = ''
        if (thisObj.title === '我的评价') {
          ajaxUrl = 'User/userGetEvaluate'
        } else {
          ajaxUrl = 'User/staffGetEvaluate'
        }
        thisObj.$chaos.ajax({
          data: {
            limit: thisObj.limit,
            end_id: thisObj.end_id
          },
          slient: true,
          userinfo: true,
          url: ajaxUrl,
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.show = true
              if (title === 'reflsh') {
                thisObj.list = []
                thisObj.$refs.loadmore.onTopLoaded()
              }
              thisObj.loadingBottomShow = false
              thisObj.$refs.loadmore.onBottomLoaded()
              if (res.result.evaluate_list.length === 0) {
                thisObj.research = false
                if (thisObj.end_id === 0) {
                  thisObj.evasta = false
                }
                return false
              }
              if (res.result.evaluate_list < thisObj.limit) {
                thisObj.bottomsta = true
                thisObj.research = false
              } else {
                thisObj.end_id = res.result.end_id
              }
              if (res.result.evaluate_list.length > 0) {
                thisObj.list = thisObj.list.concat(res.result.evaluate_list)
              }
            } else {
              thisObj.show = true
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        this.title = decodeURI(this.$chaos.getQueryString('title'))
        this.$chaos.setTitle(this.title)
        this.$store.commit('headerShow', true)
        this.$store.commit('title', this.title)
        this.$store.commit('footerShow', false)
        this.$chaos.verify(function () {
          thisObj.evalute()
        })
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  .mint-loadmore-top{
    text-align: center;
    line-height: 33px;
  }
  body,
  html {
    background: #f9f9f9;
  }
  .evaluate{
    padding: 10px 15px;
    background: #fff;
    position: relative;
    margin-bottom: 2px
  }
  .evaluate .evaluateLeft{
    position: absolute;
    width: 70px;
    left: 15px;
    top: 10px
  }
  .evaluate .evaluateLeft > img{
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%
  }
  .evaluate .evaluateRight{
    width: calc(100% - 70px);
    margin-left: 70px
  }
  .evaluate .username{
    height: 20px;
    line-height: 20px
  }
  .evaluate .level{
    height: 20px;
    line-height: 20px;
    padding: 8px 0
  }
  .evaluate .level span{
    float: left;
    margin-right: 10px
  }
  .evaluate .level .stars li{
    background: url("../assets/image/yy_icon_s_03.png");
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 2px
  }
  .evaluate .level .stars li.yellow{
    background: url("../assets/image/yy_icon_s_02.png");
    background-size: 100% 100%;
  }
  .evaluate .text{
    line-height: 20px;
    color: #333;
    font-size: 14px;
    overflow: hidden;
  }
  .evaluate .date{
    color: #bbb;
    text-align: right;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top:10px;
    right: 20px
  }
  .uplodaLi{
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 4%;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 7px;
    position: relative;
  }
  .fill_img{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .uplodaLi img{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 1
  }
  .clear{
    clear: both
  }
  .upload{
    margin-top: 10px;
  }
  .noeva{
    color: #999;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
</style>
